<template>
  <div>
      <el-container>
        <el-main>
          <!--    搜索表单-->
          <div style="margin-bottom: 20px;margin-left: -36%;">
            <el-input style="width: 240px" placeholder="请输入用户名" size="small" v-model="params.name"></el-input>
            <el-input style="width: 240px; margin-left: 15px" placeholder="请输入联系方式" size="small" v-model="params.phone"></el-input>
            <el-input style="width: 240px; margin-left: 15px" placeholder="请输入邮箱" size="small" v-model="params.email"></el-input>
            <el-button style="margin-left: 15px" size="small" type="primary" @click="load"><i class="el-icon-search"></i> 搜索</el-button>
            <el-button style="margin-left: 15px" size="small" type="warning" @click="reset"><i class="el-icon-refresh"></i> 重置</el-button>
          </div>
            <el-table
                :border="true"
                :data="tableData"
                stripe
                :row-style="{height: '60px'}"
                style="width: 100%"
            >
              <el-table-column
                  prop="id"
                  label="编号"
                  width="50">
              </el-table-column>
              <el-table-column
                  sortable
                  prop="name"
                  label="用户名"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="image"
                  label="头像"
                  width="75">
                <template slot-scope="scope">
                  <div>
                    <img :src="scope.row.image" style="width:40px;height:40px;border-radius:50%">
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                  sortable
                  prop="actualname"
                  label="姓名"
                  width="100">
              </el-table-column>
              <el-table-column
                  sortable
                  prop="createTime"
                  label="创建时间"
                  width="160">
              </el-table-column>
              <el-table-column
                  sortable
                  prop="updateTime"
                  label="更新时间"
                  width="160">
              </el-table-column>
              <el-table-column
                  sortable
                  prop="phone"
                  label="联系方式"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="status"
                  label="状态"
                  width="180">
                <el-switch
                    style="display: block"
                    v-model="status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="正常"
                    inactive-text="禁用中">
                </el-switch>
              </el-table-column>
              <el-table-column
                  sortable
                  prop="email"
                  label="邮件"
                  width="200">
              </el-table-column>
              <el-table-column
                  sortable
                  prop="address"
                  label="地址"
                  width="240">
              </el-table-column>
              <el-table-column label="操作"  width="210">
                <template #default="scope">
                  <!--          scope.row 就是当前行数据-->
                  <el-button type="primary" size="small" @click="handleEdit(scope.row)"><i class="el-icon-edit-outline"></i>  编 辑</el-button>
                  <el-popconfirm
                      style="margin-left: 5px"
                      title="您确定删除这行数据吗？"
                      @confirm="del(scope.row.id)"
                  >
                    <el-button type="danger" size="small" slot="reference"><i class="el-icon-delete"></i>  删 除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
          </el-table>
          <!--    分页-->
          <div style="margin-top: 20px">
            <el-pagination
                background
                :current-page="params.pageNum"
                :page-size="params.pageSize"
                layout="prev, pager, next, jumper"
                @current-change="handleCurrentChange"
                :total="total">
            </el-pagination>
          </div>

          <!--      修改-->
          <div style="margin: 10px 0">
            <el-dialog
                :visible.sync="centerDialogVisibleEdit"
                title="修改"
                width="30%"
                center>
              <el-form :model="form" ref="ruleForm" :rules="rules" label-width="60px">
                <el-form-item label="头像">
                  <el-upload
                      class="avatar-uploader"
                      action="http://localhost:8080/upload" :show-file-list="false" :on-success="imgSeccess" accept=".png,.jpg,.jpeg">
                    <img v-if="form.image" :src="form.image" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="电话">
                  <el-input v-model="form.phone" style="width: 85%" required/>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="form.email" style="width: 85%" required/>
                </el-form-item>
                <el-form-item label="地址">
                  <el-cascader style="width: 85%" required
                      size="large"
                      :options="pcaTextArr"
                      :v-model="form.selectedOptions"
                      v-model="form.address"
                      :placeholder="form.address">
                  </el-cascader>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="centerDialogVisibleEdit = false">取消</el-button>
                  <el-button type="primary" @click="save">确认</el-button>
                </span>
              </template>
            </el-dialog>
          </div>
        </el-main>
      </el-container>
  </div>

</template>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-cascader{
  display: flex;
  .el-input__inner{
    background-color: #ffffff;
  }
  ::placeholder{
    color: #000000;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


</style>
<script>
import request from "@/utils/request";
import {
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
export default {
  data() {
    return {
      tableData: [],
      // url: 'http://localhost:8080/upload',
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 7,
        name: '',
        phone: '',
        email: ''
      },
      form:{
        email:'',
        phone:'',
        address:'',
        selectedOptions: [],
        image:'',
      },
      rules: {
        phone: [{required: true, message: '请输入电话号', trigger: 'blur'}],
        email: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
        address: [{required: true, message: '请输入地址', trigger: 'blur'}]
      },
      centerDialogVisibleEdit:false,
      labelPosition: 'right',
      pcaTextArr,
      codeToText,
      options: '',
      username:'',
      image:'',
      imageUrl:'',
      status:''
    }
  },
  created() {
    this.load()
  },
  mounted() {

  },
  methods: {
    imgSeccess(res,file){
      console.log(res.data)
      this.form.image = res.data.toString();
    },
    load(){
      request.get('users/page',{
        params: this.params
      }).then(res=>{
        if(res.code === '200'){
          this.tableData = res.data.list
          this.total=res.data.total
          this.userinfo=JSON.parse(window.localStorage.getItem('name'))
          this.username=this.userinfo.name
          this.image=this.userinfo.image
          this.status=res.data.list.status
        }
      })
    },
    reset(){
      this.params = {
        pageNum: 1,
        pageSize: 7,
        name:'',
        phone:''
      }
      this.load()
    },
    handleEdit(row){
      this.form=JSON.parse(JSON.stringify(row))
      this.form.address=this.form.address
      this.centerDialogVisibleEdit=true
    },
    handleCurrentChange(pageNum) {
      // 点击分页按钮触发分页
      this.params.pageNum = pageNum
      this.load()
    },
    async save(){
      if(this.form.id){
        this.form.address=this.form.address.join('')
        this.$refs['ruleForm'].validate((valid) => {
        if(valid){
          request.put('users/updateOne',this.form).then(res=>{
            if(this.form.phone!=null && this.form.email!=null && this.form.address!=null){
              if(res.code === '200'){
                this.$message({
                  type:"success",
                  message:"更新信息成功！"
                })
                this.centerDialogVisibleEdit=false
                this.load()
              }
            }else if(this.form.phone!=null || this.form.email!=null || this.form.address!=null){
              this.$message({
                type:"error",
                message:"不能输入空信息！"
              })
            }
          })
        }
        })
      }
    },
    del(id){
      request.delete('users/deleteOne/'+id).then(res=>{
        if (res.code === '200') {
          this.$notify.success('删除成功')
          this.load()
        } else {
          this.$notify.error(res.msg)
        }
      })
    },
    //省市区三级联动事件
    handleChange(value) {
      this.selectedOptions = value
      console.log(this.selectedOptions)
      var name = ''
      this.selectedOptions.map(item => name += codeToText[item] + '') //将省市区三个拼接一起
      this.form.names = name
      //运用了CodeToText把编码转成了中文
      this.form.province = codeToText[this.selectedOptions[0]]
      this.form.county = codeToText[this.selectedOptions[1]]
      this.form.area = codeToText[this.selectedOptions[2]]
      console.log(this.form.selectedOptions)
    },
  },
}
</script>
